<template>
	<el-dialog
		title="投资风格"
		:visible.sync="mainComShow"
		width="60%"
		:before-close="cancel"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		top="6vh"
	>
		<div class="diaheader">
			<el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" v-permissionKey="['add_maintenance']" @click="formCom('新增')"
				>新增
			</el-button>
			<el-form>
				<el-form-item label="投资代码：">
					<el-select
						:disabled="searchLoading"
						v-model="investQuery.managerId"
						filterable
						clearable
						@change="searchInvestStyleClick"
						size="medium"
					>
						<el-option key="" label="--全部--" value=""> </el-option>
						<el-option v-for="(item, index) in managerList" :key="index + 'a'" :label="item.oaId" :value="item.managerId"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="投资风格：">
					<el-input
						:disabled="searchLoading"
						v-model="investQuery.investmentStyle"
						@input="searchInvestStyleClick"
						size="medium"
					></el-input>
				</el-form-item>
				<el-form-item label=" 状态：">
					<el-select :disabled="searchLoading" v-model="investQuery.checkState" @change="searchInvestStyleClick" filterable size="medium">
						<el-option v-for="(item, index) in checkList" :key="item.key + index" :label="item.lable" :value="item.key"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</div>
		<el-table
			:data="investStyleList"
			stripe
			border
			style="margin-top: 20px"
			v-loading="searchLoading"
			element-loading-text="正在加载数据，请耐心等待......"
			element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.8)"
		>
			<el-table-column prop="oaId" label="投资代码"></el-table-column>

			<el-table-column prop="investmentStyle" label="投资风格"> </el-table-column>
			<el-table-column label="状态" prop="checkState" :formatter="formatterCheckStatus"> </el-table-column>

			<el-table-column prop="operation" label="操作">
				<template slot-scope="scope">
					<el-button
						type="primary"
						size="mini"
						v-permissionKey="['check_maintenance']"
						icon="el-icon-s-check"
						@click="formCom('复核', scope.row)"
						v-if="scope.row.checkState === '0'"
						>复核</el-button
					>
					<el-button
						type="primary"
						size="mini"
						v-permissionKey="['edit_maintenance']"
						icon="el-icon-edit"
						@click="formCom('编辑', scope.row)"
						>编辑</el-button
					>
					<el-button
						size="mini"
						v-permissionKey="['del_maintenance']"
						v-if="opsList.indexOf('invest_style_del') != -1"
						@click="delInvestStyle(scope.row)"
						class="delebtn"
						type="danger"
						icon="el-icon-delete"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
			background
			:disabled="searchLoading"
			:page-size="paging.size"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
			:current-page="paging.num"
			:page-sizes="paging.sizes"
			layout="sizes,prev,pager,next,jumper,total"
			:total="paging.total"
		/>
		<maintainInfo :title="title" :infoComShow="infoComShow" @infoCom="infoCom" ref="info" @propGetData="getData" />
	</el-dialog>
</template>
<script>
import { seachStyle, delStyle, getFunManAll } from '@/api/productApi/assessment'
import maintainInfo from './maintainInfo'
import { SpecialReplace } from '@/utils/characters'
export default {
	components: {
		maintainInfo
	},
	props: {
		mainComShow: {
			type: Boolean,
			default: false
		},
		mainShowFunc: {
			type: Function,
			default: Function
		}
	},
	data() {
		return {
			title: '',
			infoComShow: false,
			investQuery: {
				investmentStyle: '',
				checkState: '',
				managerId: ''
			},
			investStyleList: [],
			checkList: [
				{ key: '', lable: '--全部--' },
				{ key: '0', lable: '待复核' },
				{ key: '1', lable: '已复核' },
				{ key: '2', lable: '已驳回' }
			],
			// 分页配置
			paging: {
				// 显示的条目数
				size: 10,
				// 当前页数
				num: 1,
				total: 0,
				pages: 0,
				sizes: [10, 20, 50, 100]
			},
			opsList: ['invest_style_del'],
			userList: [],
			managerList: [],
			searchLoading: false
		}
	},
	mounted() {
		this.getAllFund()
	},
	methods: {
		infoCom() {
			this.infoComShow = !this.infoComShow
		},
		delInvestStyle(obj) {
			this.operatorComfirm(() => {
				delStyle(obj).then(res => {
					if (res.msgCode === 'Y') {
						if (this.paging.total === 11) {
							this.paging.num = 1
						}
						this.$message({ message: '删除成功', customClass: 'el-messageClass', type: 'success' })
						this.getData()
					}
				})
			}, `删除投资风格“${obj.investmentStyle}”`)
		},
		cancel() {
			this.$emit('mainShowFunc')
			this.investQuery = {
				oaId: '',
				investmentStyle: '',
				checkState: ''
			}
		},
		formCom(type, obj) {
			this.title = type
			this.$refs.info.getData()
			this.infoCom()
			if (obj) {
				this.$refs.info.edit(JSON.stringify(obj))
			}
		},
		confirm() {
			this.$emit('mainShowFunc')
		},
		formatterCheckStatus(row, column, cellValue, index) {
			if (cellValue === '0') {
				return '待复核'
			} else if (cellValue === '1') {
				return '已复核'
			} else if (cellValue === '2') {
				return '已驳回'
			}
		},

		getData() {
			// 风格列表
			if (SpecialReplace(this.investQuery.investmentStyle, false)) {
				return
			}
			this.searchLoading = true
			seachStyle(this.investQuery, this.paging)
				.then(res => {
					if (res.msgCode === 'Y') {
						this.paging.total = res.data.page.total
						res.data.body.forEach(item => {
							if (this.managerList.some(items => item.managerInfoId === items.managerId)) {
								const obj = this.managerList.filter(items => item.managerInfoId === items.managerId)
								item.oaId = obj[0].oaId
							}
						})
						this.investStyleList = res.data.body
					}
				})
				.finally(() => {
					this.searchLoading = false
				})
		},
		getAllFund() {
			// 经理列表
			getFunManAll({ managerTypeList: ['1', '2'] }).then(res => {
				if (res.msgCode === 'Y') {
					res.data.body.forEach(item => {
						if (!!item.attributes && 'cnname' in item.attributes) {
							item.chineName = item.attributes.cnname[0].replace(/[^\u4e00-\u9fa5]/gi, '')
						} else {
							item.chineName = item.username
						}
					})
					this.managerList = res.data.body.filter(item => !!item.managerId)
				}
			})
		},

		// 搜索
		searchInvestStyleClick: function() {
			this.paging.num = 1
			this.getData()
		},

		// 改变页数
		handleCurrentChange: function(val) {
			this.paging.num = val
			this.getData()
		},

		// 改变条数
		handleSizeChange: function(val) {
			this.paging.num = 1
			this.paging.size = val
			this.getData()
		}
	}
}
</script>
<style lang="scss" scoped >
.el-form {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	.el-form-item {
		display: flex;
		margin-bottom: 0;
		margin-left: 20px;
	}
}
.diaheader {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.delebtn {
	background-color: #f56c6c;
	&:hover,
	&:active {
		background-color: #f56c6c;
	}
}
::v-deep .el-pagination {
	padding: 0;
	.el-input {
		margin: 0;
	}
	.el-pagination__total {
		float: right;
		margin-right: 0;
	}
	margin: 16px 0 16px 0;
}
</style>
